<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
</head>

<body class="bg-gray-100 text-gray-900">
  <div id="app" class="p-4">
    <json-editor-vue v-model="value" class="mb-4"></json-editor-vue>
    <textarea v-model="txt" class="w-full p-2 border border-gray-300 rounded-md mb-4"></textarea>
    <button @click="onSure" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md">确定</button>
  </div>

  <script type="importmap">
    {
      "imports": {
        "vue": "https://cdn.jsdelivr.net/npm/vue@2/dist/vue.esm.browser.min.js",
        "vue-demi": "https://cdn.jsdelivr.net/npm/vue-demi/lib/v2.7/index.mjs",
        "vanilla-jsoneditor": "https://cdn.jsdelivr.net/npm/vanilla-jsoneditor",
        "json-editor-vue": "https://cdn.jsdelivr.net/npm/json-editor-vue@0.17/dist/json-editor-vue.mjs"
      }
    }
  </script>
  <script type="module">
    import Vue from 'vue'
    import JsonEditorVue from 'json-editor-vue'

    new Vue({
      components: { JsonEditorVue },
      data() {
        return {
          txt: "",
          value: {
            a: 3,
            b: 4
          },
        }
      },
      methods: {
        onSure() {
          this.value = JSON.parse(this.txt)
        }
      }
    }).$mount('#app')
  </script>
</body>

</html>